<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <meta charset="UTF-8">
    <meta name="description" content="Ashion Template">
    <meta name="keywords" content="Ashion, unica, creative, html">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Base | 购物</title>


    <!-- Simple bar CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/simplebar.css}">
    <!-- Icons CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/feather.css}">
    <link rel="stylesheet" th:href="@{/dash/css/select2.css}">
    <link rel="stylesheet" th:href="@{/dash/css/dropzone.css}">
    <link rel="stylesheet" th:href="@{/dash/css/uppy.min.css}">
    <link rel="stylesheet" th:href="@{/dash/css/jquery.steps.css}">
    <link rel="stylesheet" th:href="@{/dash/css/jquery.timepicker.css}">
    <link rel="stylesheet" th:href="@{/dash/css/quill.snow.css}">
    <link rel="stylesheet" th:href="@{/dash/css/app-light.css}" id="lightTheme">
    <link rel="stylesheet" th:href="@{/dash/css/app-dark.css}" id="darkTheme" disabled>

    <!-- Css Styles -->
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/elegant-icons.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/jquery-ui.min.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/magnific-popup.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/owl.carousel.min.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/slicknav.min.css}" type="text/css">
  <!--  <link rel="stylesheet" th:href="@{/css/style-1.css}" type="text/css">-->
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}" type="text/css">
</head>

<body>
    <!-- Page Preloder -->
    <div id="preloder" th:fragment="preloader">
        <div class="loader"></div>
    </div>

<!-- Offcanvas Menu Begin -->
<div class="offcanvas-menu-overlay"></div>
<div class="offcanvas-menu-wrapper" th:fragment="offcanvas">
    <div class="offcanvas__close">+</div>
    <ul class="offcanvas__widget">
        <li><span class="icon_search search-switch"></span></li>
        <li><a href="#"><span class="icon_heart_alt"></span>
            <div class="tip">2</div>
        </a></li>
        <li><a href="#"><span class="icon_bag_alt"></span>
            <div class="tip">2</div>
        </a></li>
    </ul>
    <div class="offcanvas__logo">
        <a href="../index.html"><img th:src="@{/img/logo.png}" alt=""></a>
    </div>
    <div id="mobile-menu-wrap"></div>
    <div class="offcanvas__auth">
        <a href="#">登录</a>
        <a href="#">注册</a>
    </div>
</div>
<!-- Offcanvas Menu End -->

<!-- Header Section Begin -->
<header class="header" th:fragment="header">
    <nav class="navbar navbar-expand-lg navbar-light bg-white flex-row border-bottom shadow">
        <a th:href="@{/index.html}"><img th:src="@{/img/logo.jpg}" alt=""></a>
        <div class="container-fluid">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item " >
                            <a class="nav-link" href=href="#" style="padding: 0px 80px">
                                <span class="ml-lg-2">主页</span>
                            </a>
                        </li>
                        <li class="nav-item ">
                            <a class="nav-link" href="/shop/items" style="padding: 0px 80px">
                                <span class="ml-lg-2">购物</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <shiro:hasAnyRoles name="indent,user,item,role,storage,catalog">
                            <a class="nav-link" href="/dashboard" style="padding: 0px 80px">
                                <span class="ml-lg-2">后台</span>
                            </a>
                            </shiro:hasAnyRoles>
                        </li>
                </ul>
            </div>
    <!--    <ul class="nav">
            <li class="nav-item">
                <a class="nav-link text-muted my-2" href="#" id="modeSwitcher" data-mode="light">
                    <i class="fe fe-sun fe-16"></i>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-muted my-2" href="./#" data-toggle="modal" data-target="#cartModal">
                    <span class="fe fe-shopping-cart fe-16"></span>
                </a>
            </li>
        &lt;!&ndash;    <li class="nav-item">
                <a class="nav-link text-muted my-2" href="./#" data-toggle="modal" data-target=".modal-shortcut">
                    <span class="fe fe-grid fe-16"></span>
                </a>
            </li>&ndash;&gt;
        &lt;!&ndash;    <li class="nav-item nav-notif">
                <a class="nav-link text-muted my-2" href="./#" data-toggle="modal" data-target=".modal-notif">
                    <span class="fe fe-bell fe-16"></span>
                    <span class="dot dot-md bg-success"></span>
                </a>
            </li>&ndash;&gt;
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle text-muted pr-0" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <span class="avatar avatar-sm mt-2">
                <img shiro:guest="" th:src="@{/img/blog/c3.jpg}" alt="..." class="avatar-img rounded-circle">
                <img shiro:authenticated="" th:src="${session.user.file}" alt="..." class="avatar-img rounded-circle">
              </span>
                </a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#" shiro:authenticated="" th:text="'用户:'+${session.user.username}"></a>
                    <a class="dropdown-item" shiro:authenticated="" th:href="@{/user/detail(userId=${session.user.id})}">个人资料</a>
                    <a class="dropdown-item" href="#">设置</a>
                    <a class="dropdown-item" href="/login">登陆</a>
                    <a class="dropdown-item" href="/logout">注销</a>
                </div>
            </li>
        </ul>-->
            <ul class="navbar-nav d-flex flex-row">
                <li class="nav-item">
                    <a class="nav-link text-muted my-2" href="./#" id="modeSwitcher" data-mode="light">
                        <i class="fe fe-sun fe-16"></i>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-muted my-2" href="./#" data-toggle="modal" data-target="#cartModal">
                        <span class="fe fe-shopping-cart fe-16"></span>
                    </a>
                </li>
               <!-- <li class="nav-item">
                    <a class="nav-link text-muted my-2" href="./#" data-toggle="modal" data-target=".modal-shortcut">
                        <i class="fe fe-grid fe-16"></i>
                    </a>
                </li>
                <li class="nav-item nav-notif">
                    <a class="nav-link text-muted my-2" href="./#" data-toggle="modal" data-target=".modal-notif">
                        <i class="fe fe-bell fe-16"></i>
                        <span class="dot dot-md bg-success"></span>
                    </a>
                </li>-->
                <li class="nav-item dropdown ml-lg-0">
                    <a class="nav-link dropdown-toggle text-muted" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="avatar avatar-sm mt-2">


                  <img th:src="@{/img/blog/c3.jpg}" alt="..." class="avatar-img rounded-circle" width=12% height="12%">
                </span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                        <li class="nav-item">
                            <a class="nav-link pl-3" shiro:authenticated="" href="#">我的订单</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link pl-3" shiro:guest="" th:text="登陆" href="/login">登陆</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link pl-3"  shiro:guest="" th:text="注册" href="/register">注册</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link pl-3" shiro:authenticated="" href="/logout">注销</a>
                        </li>
                        <a class="nav-link pl-3" shiro:authenticated="" th:href="@{/user/detail(userId=${session.user.id})}">用户资料</a>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
</header>
<!--<header class="header" th:fragment="header">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xl-3 col-lg-2">
                <div class="header__logo">
                    <a th:href="@{/index.html}"><img th:src="@{/img/logo.jpg}" alt=""></a>
                </div>
            </div>
            <div class="col-xl-6 col-lg-7">
                <nav class="header__menu">
                    <ul>
                        <li class="active"><a href="/index">Home</a></li>&ndash;&gt;&ndash;&gt;
                        &lt;!&ndash;                            <li style="margin-right: 20%"><a href="/index">首页</a></li>&ndash;&gt;
                        &lt;!&ndash;                            <li style="margin-right: 20%"><a href="/shop/items">超市</a></li>&ndash;&gt;
                        &lt;!&ndash;                            <shiro:hasAnyRoles name="indent,user,item,role,storage,catalog">&ndash;&gt;
                        &lt;!&ndash;                                <li><a href="/dashboard">后台</a></li>&ndash;&gt;
                        &lt;!&ndash;                            </shiro:hasAnyRoles>&ndash;&gt;

                        &lt;!&ndash;                            <li class="active"><a href="/index">Home</a></li>&ndash;&gt;
                        <li style="padding-right: 150px"><a href="/index">主页</a></li>
                        <li style="padding-right: 150px"><a href="/shop/items">购物</a></li>
                        <shiro:hasAnyRoles name="indent,user,item,role,storage,catalog">
                        <li style="padding-right: 150px"><a href="/dashboard">后台</a></li>
                        </shiro:hasAnyRoles>

                        &lt;!&ndash;    <li style="padding-right: 60px" shiro:hasPermission="indent:list"><a href="/indent/list">Indent</a></li>
                            <li style="padding-right: 60px" shiro:hasPermission="item:list"><a href="/item/list">Item</a>&ndash;&gt;
                        &lt;!&ndash;                                <ul class="dropdown">&ndash;&gt;
                        &lt;!&ndash;                                    <li><a th:href="@{../product-details.html}">Product Details</a></li>&ndash;&gt;
                        &lt;!&ndash;                                    <li><a href="/shop/items/">Shop Cart</a></li>&ndash;&gt;
                        &lt;!&ndash;                                    <li><a th:href="@{../checkout.html}">Checkout</a></li>&ndash;&gt;
                        &lt;!&ndash;                                    <li><a th:href="@{../blog.html}">Blog Details</a></li>&ndash;&gt;
                        &lt;!&ndash;                                </ul>&ndash;&gt;
                        &lt;!&ndash;                            </li>&ndash;&gt;
                        &lt;!&ndash;                            <li><a href="../blog.html">Blog</a></li>&ndash;&gt;
                        &lt;!&ndash;                            <li><a href="../contact.html">Contact</a></li>&ndash;&gt;
                    </ul>
                </nav>
            </div>
            <div class="col-lg-3">
                <div class="header__right">
                    <ul class="header__right__widget">
                        &lt;!&ndash;                            <li><span class="icon_search search-switch"></span></li>&ndash;&gt;
                        &lt;!&ndash;                            <li><a href="#"><span class="icon_heart_alt"></span>&ndash;&gt;
                        &lt;!&ndash;                                <div class="tip">2</div>&ndash;&gt;
                        &lt;!&ndash;                            </a></li>&ndash;&gt;
                        <li><a href="/cart/"><span class="icon_bag_alt"></span>
                            &lt;!&ndash;                                <th:block th:if="${#session.cartCount}">&ndash;&gt;
                            &lt;!&ndash;                                <div class="tip" th:value="${#session.cartCount}">2</div>&ndash;&gt;
                            &lt;!&ndash;                                </th:block>&ndash;&gt;
                            <div class="tip" id="cartNum">2</div>
                        </a></li>
                    </ul>

                    <div class="header__right__auth">
                        <a shiro:guest="" th:text="登录" href="/login"></a>
                        &lt;!&ndash;                            <a th:text="Login" href="#"></a>&ndash;&gt;
                        &lt;!&ndash;                            <a th:text="Register" href="#"></a>&ndash;&gt;
                        <a shiro:guest="" th:text="注册" href="/register"></a>
                        &lt;!&ndash;marker &ndash;&gt;
                        <a shiro:authenticated="" th:href="@{/user/detail(userId=${session.user.id})}"
                           th:text="'用户:'+${session.user.username}"></a>
                        <a shiro:authenticated="" href="/logout">注销</a>


                        &lt;!&ndash;         <img th:src="${session.user.file}" shiro:authenticated="" width="12%" height="12%"/>&ndash;&gt;


                        <img th:src="${session.user.file}" shiro:authenticated="" width="12%" height="12%" class="dropimg"/>

                        <div class="dropdown1111-content" >
                            <a href="#"  style="">个人资料</a>
                            <a href="#">注销</a>
                            <a href="#">进入后台</a>
                        </div>


                    </div>


                </div>

            </div>
        </div>
    </div>
    <div class="canvas__open">
        <i class="fa fa-bars"></i>
    </div>
    </div>
</header>-->
<!-- Header Section End -->

<!-- Breadcrumb Begin -->
<div class="breadcrumb-option" th:fragment="breadcrumb">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="breadcrumb__links">
                    <a href="../index.html"><i class="fa fa-home"></i> Home</a>
                    <span>Shop</span>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Breadcrumb End -->

<!-- Shop Section Begin -->
<section class="shop spad" th:fragment="shop">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-3">
                <div class="shop__sidebar">
                    <div class="sidebar__categories">
                        <div class="section-title">
                            <h4>Categories</h4>
                        </div>
                        <div class="categories__accordion">
                            <div class="accordion" id="accordionExample">
                                <div class="card">
                                    <div class="card-heading active">
                                        <a data-toggle="collapse" data-target="#collapseOne">Women</a>
                                    </div>
                                    <div id="collapseOne" class="collapse show" data-parent="#accordionExample">
                                        <div class="card-body">
                                            <ul>
                                                <li><a href="#">Coats</a></li>
                                                <li><a href="#">Jackets</a></li>
                                                <li><a href="#">Dresses</a></li>
                                                <li><a href="#">Shirts</a></li>
                                                <li><a href="#">T-shirts</a></li>
                                                <li><a href="#">Jeans</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-heading">
                                        <a data-toggle="collapse" data-target="#collapseTwo">Men</a>
                                    </div>
                                    <div id="collapseTwo" class="collapse" data-parent="#accordionExample">
                                        <div class="card-body">
                                            <ul>
                                                <li><a href="#">Coats</a></li>
                                                <li><a href="#">Jackets</a></li>
                                                <li><a href="#">Dresses</a></li>
                                                <li><a href="#">Shirts</a></li>
                                                <li><a href="#">T-shirts</a></li>
                                                <li><a href="#">Jeans</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-heading">
                                        <a data-toggle="collapse" data-target="#collapseThree">Kids</a>
                                    </div>
                                    <div id="collapseThree" class="collapse" data-parent="#accordionExample">
                                        <div class="card-body">
                                            <ul>
                                                <li><a href="#">Coats</a></li>
                                                <li><a href="#">Jackets</a></li>
                                                <li><a href="#">Dresses</a></li>
                                                <li><a href="#">Shirts</a></li>
                                                <li><a href="#">T-shirts</a></li>
                                                <li><a href="#">Jeans</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-heading">
                                        <a data-toggle="collapse" data-target="#collapseFour">Accessories</a>
                                    </div>
                                    <div id="collapseFour" class="collapse" data-parent="#accordionExample">
                                        <div class="card-body">
                                            <ul>
                                                <li><a href="#">Coats</a></li>
                                                <li><a href="#">Jackets</a></li>
                                                <li><a href="#">Dresses</a></li>
                                                <li><a href="#">Shirts</a></li>
                                                <li><a href="#">T-shirts</a></li>
                                                <li><a href="#">Jeans</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-heading">
                                        <a data-toggle="collapse" data-target="#collapseFive">Cosmetic</a>
                                    </div>
                                    <div id="collapseFive" class="collapse" data-parent="#accordionExample">
                                        <div class="card-body">
                                            <ul>
                                                <li><a href="#">Coats</a></li>
                                                <li><a href="#">Jackets</a></li>
                                                <li><a href="#">Dresses</a></li>
                                                <li><a href="#">Shirts</a></li>
                                                <li><a href="#">T-shirts</a></li>
                                                <li><a href="#">Jeans</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="sidebar__filter">
                        <div class="section-title">
                            <h4>Shop by price</h4>
                        </div>
                        <div class="filter-range-wrap">
                            <div class="price-range ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"
                                 data-min="33" data-max="99"></div>
                            <div class="range-slider">
                                <div class="price-input">
                                    <p>Price:</p>
                                    <input type="text" id="minamount">
                                    <input type="text" id="maxamount">
                                </div>
                            </div>
                        </div>
                        <a href="#">Filter</a>
                    </div>
                    <div class="sidebar__sizes">
                        <div class="section-title">
                            <h4>Shop by size</h4>
                        </div>
                        <div class="size__list">
                            <label for="xxs">
                                xxs
                                <input type="checkbox" id="xxs">
                                <span class="checkmark"></span>
                            </label>
                            <label for="xs">
                                xs
                                <input type="checkbox" id="xs">
                                <span class="checkmark"></span>
                            </label>
                            <label for="xss">
                                xs-s
                                <input type="checkbox" id="xss">
                                <span class="checkmark"></span>
                            </label>
                            <label for="s">
                                s
                                <input type="checkbox" id="s">
                                <span class="checkmark"></span>
                            </label>
                            <label for="m">
                                m
                                <input type="checkbox" id="m">
                                <span class="checkmark"></span>
                            </label>
                            <label for="ml">
                                m-l
                                <input type="checkbox" id="ml">
                                <span class="checkmark"></span>
                            </label>
                            <label for="l">
                                l
                                <input type="checkbox" id="l">
                                <span class="checkmark"></span>
                            </label>
                            <label for="xl">
                                xl
                                <input type="checkbox" id="xl">
                                <span class="checkmark"></span>
                            </label>
                        </div>
                    </div>
                    <div class="sidebar__color">
                        <div class="section-title">
                            <h4>Shop by size</h4>
                        </div>
                        <div class="size__list color__list">
                            <label for="black">
                                Blacks
                                <input type="checkbox" id="black">
                                <span class="checkmark"></span>
                            </label>
                            <label for="whites">
                                Whites
                                <input type="checkbox" id="whites">
                                <span class="checkmark"></span>
                            </label>
                            <label for="reds">
                                Reds
                                <input type="checkbox" id="reds">
                                <span class="checkmark"></span>
                            </label>
                            <label for="greys">
                                Greys
                                <input type="checkbox" id="greys">
                                <span class="checkmark"></span>
                            </label>
                            <label for="blues">
                                Blues
                                <input type="checkbox" id="blues">
                                <span class="checkmark"></span>
                            </label>
                            <label for="beige">
                                Beige Tones
                                <input type="checkbox" id="beige">
                                <span class="checkmark"></span>
                            </label>
                            <label for="greens">
                                Greens
                                <input type="checkbox" id="greens">
                                <span class="checkmark"></span>
                            </label>
                            <label for="yellows">
                                Yellows
                                <input type="checkbox" id="yellows">
                                <span class="checkmark"></span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-9 col-md-9">
                <div class="row">
                    <!--遍历items-->
                    <div class="col-lg-4 col-md-6" th:each="item:${items}">
                        <div class="product__item">
                            <!--                                <div class="product__item__pic set-bg" data-setbg="img/shop/shop-1.jpg">-->
                            <div class="product__item__pic set-bg" th:data-setbg="${item.image}">
                                <!-- new,stockout,stockblue,sale-->
                                <div class="label new" th:text="${item.getStatus()==1?'NEW':'SOLD OUT'}">New</div>

                                <ul class="product__hover">
                                    <!--                                        <li><a href="img/shop/shop-1.jpg" class="image-popup"><span class="arrow_expand"></span></a></li>-->
                                    <li><a th:href="${item.image}" class="image-popup"><span
                                            class="arrow_expand"></span></a></li>
                                    <li><a href="#"><span class="icon_heart_alt"></span></a></li>
                                    <li><a href="#"><span class="icon_bag_alt"></span></a></li>
                                </ul>
                            </div>
                            <div class="product__item__text">
                                <!--                                    <h6><a href="#">Furry hooded parka</a></h6>-->
                                <!--未做商品详情URL -->
                                <h6><a href="#" th:text="${item.getName()}">Furry hooded parka</a></h6>
                                <div class="rating">
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                </div>
                                <div class="product__price" th:text="${'¥ '+item.getPriceSell()}">$ 59.0</div>
                            </div>
                        </div>
                    </div>

<!--                        <div class="col-lg-4 col-md-6">-->
<!--                            <div class="product__item">-->
<!--                                <div class="product__item__pic set-bg" data-setbg="img/shop/shop-1.jpg">-->
<!--&lt;!&ndash;                                <div class="product__item__pic set-bg" th:data-setbg="#{items.image}">&ndash;&gt;-->
<!--                                    <div class="label new">New</div>-->
<!--                                    <ul class="product__hover">-->
<!--                                        <li><a href="img/shop/shop-1.jpg" class="image-popup"><span class="arrow_expand"></span></a></li>-->
<!--                                        <li><a href="#"><span class="icon_heart_alt"></span></a></li>-->
<!--                                        <li><a href="#"><span class="icon_bag_alt"></span></a></li>-->
<!--                                    </ul>-->
<!--                                </div>-->
<!--                                <div class="product__item__text">-->
<!--                                    <h6><a href="#">Furry hooded parka</a></h6>-->
<!--                                    <div class="rating">-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                    </div>-->
<!--                                    <div class="product__price">$ 59.0</div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <div class="col-lg-4 col-md-6">-->
<!--                            <div class="product__item">-->
<!--                                <div class="product__item__pic set-bg" data-setbg="img/shop/shop-2.jpg">-->
<!--                                    <ul class="product__hover">-->
<!--                                        <li><a href="img/shop/shop-2.jpg" class="image-popup"><span class="arrow_expand"></span></a></li>-->
<!--                                        <li><a href="#"><span class="icon_heart_alt"></span></a></li>-->
<!--                                        <li><a href="#"><span class="icon_bag_alt"></span></a></li>-->
<!--                                    </ul>-->
<!--                                </div>-->
<!--                                <div class="product__item__text">-->
<!--                                    <h6><a href="#">Flowy striped skirt</a></h6>-->
<!--                                    <div class="rating">-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                    </div>-->
<!--                                    <div class="product__price">$ 49.0</div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <div class="col-lg-4 col-md-6">-->
<!--                            <div class="product__item">-->
<!--                                <div class="product__item__pic set-bg" data-setbg="img/shop/shop-3.jpg">-->
<!--                                    <ul class="product__hover">-->
<!--                                        <li><a href="img/shop/shop-3.jpg" class="image-popup"><span class="arrow_expand"></span></a></li>-->
<!--                                        <li><a href="#"><span class="icon_heart_alt"></span></a></li>-->
<!--                                        <li><a href="#"><span class="icon_bag_alt"></span></a></li>-->
<!--                                    </ul>-->
<!--                                </div>-->
<!--                                <div class="product__item__text">-->
<!--                                    <h6><a href="#">Croc-effect bag</a></h6>-->
<!--                                    <div class="rating">-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                    </div>-->
<!--                                    <div class="product__price">$ 59.0</div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <div class="col-lg-4 col-md-6">-->
<!--                            <div class="product__item">-->
<!--                                <div class="product__item__pic set-bg" data-setbg="img/shop/shop-4.jpg">-->
<!--                                    <ul class="product__hover">-->
<!--                                        <li><a href="img/shop/shop-4.jpg" class="image-popup"><span class="arrow_expand"></span></a></li>-->
<!--                                        <li><a href="#"><span class="icon_heart_alt"></span></a></li>-->
<!--                                        <li><a href="#"><span class="icon_bag_alt"></span></a></li>-->
<!--                                    </ul>-->
<!--                                </div>-->
<!--                                <div class="product__item__text">-->
<!--                                    <h6><a href="#">Dark wash Xavi jeans</a></h6>-->
<!--                                    <div class="rating">-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                    </div>-->
<!--                                    <div class="product__price">$ 59.0</div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <div class="col-lg-4 col-md-6">-->
<!--                            <div class="product__item sale">-->
<!--                                <div class="product__item__pic set-bg" data-setbg="img/shop/shop-5.jpg">-->
<!--                                    <div class="label">Sale</div>-->
<!--                                    <ul class="product__hover">-->
<!--                                        <li><a href="img/shop/shop-5.jpg" class="image-popup"><span class="arrow_expand"></span></a></li>-->
<!--                                        <li><a href="#"><span class="icon_heart_alt"></span></a></li>-->
<!--                                        <li><a href="#"><span class="icon_bag_alt"></span></a></li>-->
<!--                                    </ul>-->
<!--                                </div>-->
<!--                                <div class="product__item__text">-->
<!--                                    <h6><a href="#">Ankle-cuff sandals</a></h6>-->
<!--                                    <div class="rating">-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                    </div>-->
<!--                                    <div class="product__price">$ 49.0 <span>$ 59.0</span></div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <div class="col-lg-4 col-md-6">-->
<!--                            <div class="product__item">-->
<!--                                <div class="product__item__pic set-bg" data-setbg="img/shop/shop-6.jpg">-->
<!--                                    <ul class="product__hover">-->
<!--                                        <li><a href="img/shop/shop-6.jpg" class="image-popup"><span class="arrow_expand"></span></a></li>-->
<!--                                        <li><a href="#"><span class="icon_heart_alt"></span></a></li>-->
<!--                                        <li><a href="#"><span class="icon_bag_alt"></span></a></li>-->
<!--                                    </ul>-->
<!--                                </div>-->
<!--                                <div class="product__item__text">-->
<!--                                    <h6><a href="#">Contrasting sunglasses</a></h6>-->
<!--                                    <div class="rating">-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                    </div>-->
<!--                                    <div class="product__price">$ 59.0</div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <div class="col-lg-4 col-md-6">-->
<!--                            <div class="product__item">-->
<!--                                <div class="product__item__pic set-bg" data-setbg="img/shop/shop-7.jpg">-->
<!--                                    <ul class="product__hover">-->
<!--                                        <li><a href="img/shop/shop-7.jpg" class="image-popup"><span class="arrow_expand"></span></a></li>-->
<!--                                        <li><a href="#"><span class="icon_heart_alt"></span></a></li>-->
<!--                                        <li><a href="#"><span class="icon_bag_alt"></span></a></li>-->
<!--                                    </ul>-->
<!--                                </div>-->
<!--                                <div class="product__item__text">-->
<!--                                    <h6><a href="#">Circular pendant earrings</a></h6>-->
<!--                                    <div class="rating">-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                    </div>-->
<!--                                    <div class="product__price">$ 59.0</div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <div class="col-lg-4 col-md-6">-->
<!--                            <div class="product__item">-->
<!--                                <div class="product__item__pic set-bg" data-setbg="img/shop/shop-8.jpg">-->
<!--                                    <div class="label stockout stockblue">Out Of Stock</div>-->
<!--                                    <ul class="product__hover">-->
<!--                                        <li><a href="img/shop/shop-8.jpg" class="image-popup"><span class="arrow_expand"></span></a></li>-->
<!--                                        <li><a href="#"><span class="icon_heart_alt"></span></a></li>-->
<!--                                        <li><a href="#"><span class="icon_bag_alt"></span></a></li>-->
<!--                                    </ul>-->
<!--                                </div>-->
<!--                                <div class="product__item__text">-->
<!--                                    <h6><a href="#">Cotton T-Shirt</a></h6>-->
<!--                                    <div class="rating">-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                    </div>-->
<!--                                    <div class="product__price">$ 59.0</div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <div class="col-lg-4 col-md-6">-->
<!--                            <div class="product__item sale">-->
<!--                                <div class="product__item__pic set-bg" data-setbg="img/shop/shop-9.jpg">-->
<!--                                    <div class="label">Sale</div>-->
<!--                                    <ul class="product__hover">-->
<!--                                        <li><a href="img/shop/shop-9.jpg" class="image-popup"><span class="arrow_expand"></span></a></li>-->
<!--                                        <li><a href="#"><span class="icon_heart_alt"></span></a></li>-->
<!--                                        <li><a href="#"><span class="icon_bag_alt"></span></a></li>-->
<!--                                    </ul>-->
<!--                                </div>-->
<!--                                <div class="product__item__text">-->
<!--                                    <h6><a href="#">Water resistant zips backpack</a></h6>-->
<!--                                    <div class="rating">-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                        <i class="fa fa-star"></i>-->
<!--                                    </div>-->
<!--                                    <div class="product__price">$ 49.0 <span>$ 59.0</span></div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->


                        <div class="col-lg-12 text-center">
                            <div class="pagination__option">
<!--                                <a href="#">1</a>-->
<!--                                <a href="#">2</a>-->
<!--                                <a href="#">3</a>-->
<!--                                <li th:each="p:${#numbers.sequence(1,page.total)}"-->
<!--                                    th:class="${p.longValue() eq (page.current) ? 'active':''}"></li>-->
                                <th:block th:if="${page != null}">
                                <a th:if="${page.current > 1}" th:href="@{(${page.current -1})}"><i class="fa fa-angle-left"></i></a>
                                <a th:if="${page.current < ((page.total/page.size)+1)}" th:href="@{(${page.current +1})}"><i class="fa fa-angle-right"></i></a>
                                </th:block>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Shop Section End -->

    <!-- Instagram Begin -->
    <div class="instagram" th:fragment="ins">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-2 col-md-4 col-sm-4 p-0">
                    <div class="instagram__item set-bg" data-setbg="img/instagram/insta-1.jpg">
                        <div class="instagram__text">
                            <i class="fa fa-instagram"></i>
                            <a href="#">@ ashion_shop</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-2 col-md-4 col-sm-4 p-0">
                    <div class="instagram__item set-bg" data-setbg="img/instagram/insta-2.jpg">
                        <div class="instagram__text">
                            <i class="fa fa-instagram"></i>
                            <a href="#">@ ashion_shop</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-2 col-md-4 col-sm-4 p-0">
                    <div class="instagram__item set-bg" data-setbg="img/instagram/insta-3.jpg">
                        <div class="instagram__text">
                            <i class="fa fa-instagram"></i>
                            <a href="#">@ ashion_shop</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-2 col-md-4 col-sm-4 p-0">
                    <div class="instagram__item set-bg" data-setbg="img/instagram/insta-4.jpg">
                        <div class="instagram__text">
                            <i class="fa fa-instagram"></i>
                            <a href="#">@ ashion_shop</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-2 col-md-4 col-sm-4 p-0">
                    <div class="instagram__item set-bg" data-setbg="/img/instagram/insta-5.jpg">
                        <div class="instagram__text">
                            <i class="fa fa-instagram"></i>
                            <a href="#">@ ashion_shop</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-2 col-md-4 col-sm-4 p-0">
                    <div class="instagram__item set-bg" data-setbg="img/instagram/insta-6.jpg">
                        <div class="instagram__text">
                            <i class="fa fa-instagram"></i>
                            <a href="#">@ ashion_shop</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Instagram End -->

    <!-- Footer Section Begin -->
    <footer class="footer" th:fragment="footer">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-md-6 col-sm-7">
                    <div class="footer__about">
                        <div class="footer__logo">
                            <a href="../index.html"><img th:src="@{/img/logo.png}" alt=""></a>
                        </div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
                        cilisis.</p>
                    <div class="footer__payment">
                        <a href="#"><img th:src="@{/img/payment/payment-1.png}" alt=""></a>
                        <a href="#"><img th:src="@{/img/payment/payment-2.png}" alt=""></a>
                        <a href="#"><img th:src="@{/img/payment/payment-3.png}" alt=""></a>
                        <a href="#"><img th:src="@{/img/payment/payment-4.png}" alt=""></a>
                        <a href="#"><img th:src="@{/img/payment/payment-5.png}" alt=""></a>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-3 col-sm-5">
                <div class="footer__widget">
                    <h6>快捷链接</h6>
                    <ul>
                        <li><a href="#">关于</a></li>
                        <li><a href="#">博客</a></li>
                        <li><a href="#">联系</a></li>
                        <li><a href="#">常见问题解答</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-2 col-md-3 col-sm-4">
                <div class="footer__widget">
                    <h6>帐户</h6>
                    <ul>
                        <li><a href="#">我的账户</a></li>
                        <li><a href="#">订单跟踪</a></li>
                        <li><a href="#">结账</a></li>
                        <li><a href="#">愿望清单</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-4 col-md-8 col-sm-8">
                <div class="footer__newslatter">
                    <h6>简讯</h6>
                    <form action="#">
                        <input type="text" placeholder="Email">
                        <button type="submit" class="site-btn">订阅</button>
                    </form>
                    <div class="footer__social">
                        <a href="#"><i class="fa fa-facebook"></i></a>
                        <a href="#"><i class="fa fa-twitter"></i></a>
                        <a href="#"><i class="fa fa-youtube-play"></i></a>
                        <a href="#"><i class="fa fa-instagram"></i></a>
                        <a href="#"><i class="fa fa-pinterest"></i></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
                <!--    <div class="footer__copyright__text">
                        <p>Copyright &copy; <script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a></p>
                    </div>-->
                <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
            </div>
        </div>
    </div>
</footer>
<!-- Footer Section End -->

    <!-- Search Begin -->
    <div class="search-model" th:fragment="search">
        <div class="h-100 d-flex align-items-center justify-content-center">
            <div class="search-close-switch">+</div>
            <form class="search-model-form">
                <input type="text" id="search-input" placeholder="Search here.....">
            </form>
        </div>
    </div>
    <!-- Search End -->

    <!-- Js Plugins -->
    <script th:src="@{/js/jquery-3.3.1.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/jquery.magnific-popup.min.js}"></script>
    <script th:src="@{/js/jquery-ui.min.js}"></script>
    <script th:src="@{/js/mixitup.min.js}"></script>
    <script th:src="@{/js/jquery.countdown.min.js}"></script>
    <script th:src="@{/js/jquery.slicknav.js}"></script>
    <script th:src="@{/js/owl.carousel.min.js}"></script>
    <script th:src="@{/js/jquery.nicescroll.min.js}"></script>
    <script th:src="@{/js/main-1.js}"></script>
    <script th:src="@{/dash/js/gauge.min.js}"></script>
    <script th:src="@{/dash/js/jquery.sparkline.min.js}"></script>
    <script th:src='@{/dash/js/select2.min.js}'></script>
    <script th:src="@{/dash/js/jquery.stickOnScroll.js}"></script>
    <script th:src="@{/dash/js/tinycolor-min.js}"></script>
    <script th:src='@{/dash/js/jquery.steps.min.js}'></script>
    <script th:src='@{/dash/js/jquery.validate.min.js}'></script>
    <script th:src='@{/dash/js/dropzone.min.js}'></script>
    <script th:src='@{/dash/js/uppy.min.js}'></script>
    <script th:src='@{/dash/js/quill.min.js}'></script>
    <script th:src="@{/dash/js/config.js}"></script>
    <script th:src="@{/dash/js/apps.js}"></script>

</body>

</html>
